<template>
	<div id="add">
		<div class="back">
			<Button type="primary" style="width: 5%;height: 30px" @click="back()">返回</Button>
		</div>
		<div class="main">
			<Form :label-width="130">
				<FormItem label="产品名称">
					<Input v-model="name" placeholder="Enter something..."></Input>
				</FormItem>
				<FormItem label="产品描述">
					<Input v-model="description" placeholder="Enter something..."></Input>
				</FormItem>
				<FormItem label="标签">
				<Input v-model="tags" placeholder="Enter something..."></Input>
				</FormItem>
				<FormItem label="缩略图">
					<input type="file" id="img"/>
				</FormItem>

				<FormItem label="市场定价">
					<Input v-model="price" placeholder="Enter something..."></Input>
				</FormItem>
				<FormItem label="是否可见">
					<Input v-model="visible" placeholder="Enter something..."></Input>
				</FormItem>
				<FormItem label="三维场景id">
					<Input v-model="d3id" placeholder="Enter something..."></Input>
				</FormItem>
				<FormItem label="外部地址">
					<Input v-model="url" placeholder="Enter something..."></Input>
				</FormItem>
				<FormItem label="商家ID">
					<Input v-model="cid" placeholder="Enter something..."></Input>
				</FormItem>
				<FormItem label="富文本">
					<template>
                    　　　　<div>
                    　　　　<!--editor的div为富文本的承载容器-->
                    　　　　		<div id="editor"></div>
                    　　　　</div>
					</template>
				</FormItem>
				<FormItem label="相册">
					<add_picture @getAlbum="getAlbum"></add_picture>
				</FormItem>
				<FormItem>
					<Button type="primary" @click="loadimage()" style="width: 10%;height: 30px">提交</Button>
				</FormItem>
			</Form>
		</div>
	</div>
</template>

<script>
	import { adminAdd } from '../../http/API/index'
	import { loadimage } from '../../http/API/index'
    import add_picture  from './add_picture'
	export default {
        components: {add_picture},
		data() {
			return {
				msg: '欢迎来到后台添加界面',
				name: '',
                description: '',
				tags: '',
				thumbnail: '',
				price: '',
				visible: '',
				d3id: '',
				url: '',
				cid: '',
				rich_text: '',
				album: '',
				file: '',
				imgData: [],
                editor: null,
                fileList: [],

			}
		},
		watch: {

		},
		methods: {
            //上传后台数据
            adminAdd() {
                adminAdd(this.name,this.description, this.tags,this.thumbnail,this.price, this.visible, this.d3id, this.url,this.cid,this.editor.getContent(),this.album).then((res) => {
                    if (res.code === 20000) {
                        console.log(res);
                        alert("添加成功");
                    } else {
                        console.log("error");
                    }
                })
            },
            //上传图片
            loadimage() {
                loadimage(this.imgData).then((res) => {
                    if (res.code === 20000) {
                        this.thumbnail = res.data['name'];
                        console.log(this.thumbnail);
                       this.adminAdd();
                    }
                }).catch(function (e) {
                    console.log(e);
                })
            },

            startt() {
                var img = document.getElementById('img');
                let _this = this;
                img.onchange = function (result) {
                    let images = result.target.files;
                    for(let i = 0, len = images.length; i < len; i++){
                        console.log(images[i])
                        if (!(images[i].type.indexOf('image') === 0 && images[i].type && /\.(?:jpg|png|gif)$/.test(images[i].name))) {
                            alert('图片只能是jpg,gif,png');
                            return;
                        }
                        let imgFile = new FileReader();
                        imgFile.readAsDataURL(images[i]);
                        imgFile.onload = function (e) {
                            _this.imgData.push(e.target.result);
                        };
					}
                }
            },
            getAlbum(data) {
                this.album = data;
			},
			back(){
                this.$router.go(-1);
			}
        },
		mounted() {
			this.startt();
            this.editor = UE.getEditor('editor');
		},
		created() {

		},

	}
</script>

<style scoped>
	* {
		font-size: 14px;
		font-family: '微软雅黑';
		margin: 0px;
		padding: 0px;
	}
	.main{
		width: 80%;
		margin: 0 auto;
	}
	.ivu-form-item{
		margin: 25px;
	}
	.ivu-input-type	{
		width: 70%;
	}
</style>